<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">
                You're deleting
                <span data-bind="visible: databasesToDelete.length > 1, text: databasesToDelete.length"></span>
                <span data-bind="text: databasesToDelete.length === 1 ? '1 database' : 'databases'"></span>
            </h5>
            <button type="button" class="close" data-bind="click: cancel" aria-hidden="true">
                <i class="icon-cancel"></i>
            </button>
        </div>
        <div class="padding">
            <div style="max-height: 290px; overflow-y: auto;">
                <ul class="databases-list" data-bind="foreach: databasesToDelete">
                    <li class="force-text-wrap"><i class="icon-database text-primary"></i>
                        <small title="This database is encrypted" data-bind="visible: isEncrypted"><i class="icon-encryption text-success"></i></small>
                        <small title="This database is not encrypted" data-bind="visible: !isEncrypted"><i class="icon-unlock text-muted"></i></small>
                        <strong data-bind="text: name"></strong>
                    </li>
                </ul>
            </div>
            <span>Select a delete option below</span><br>
            <span data-bind="visible: databasesToDelete.length > 1">
                The option selected will apply to all of the deleted databases
            </span>
        </div>
        <div class="padding margin margin-sm mt-0 border-radius-xs alert alert-warning">
            <h3>Delete and keep files</h3>
            <p class="small">
                Database will be deleted from all nodes in the cluster.<br />
                The physical files will be left untouched on disk.
            </p>
            <div class="flex-horizontal margin-top-sm">
                <div class="flex-start text-warning">
                    <i class="icon-warning"></i>
                </div>
                <div>
                    <i>Database Configuration, Identities &amp; Compare Exchange</i>
                    data will not be recovered if the database is to be added again in the future.
                    Please export this data before deleting if needed.
                </div>
            </div>
            <div class="flex-horizontal" data-bind="if: encryptedCount > 0">
                <div class="flex-start text-warning">
                    <i class="icon-warning"></i>
                </div>
                <div>
                    <i>The Secret Key<span data-bind="text: encryptedCount === 1 ? '' : 's'"></span></i>
                    will be deleted for the encrypted database<span data-bind="text: encryptedCount === 1 ? '' : 's'"></span>.<br>
                    In order to export it, please use the rvn tool:<br>
                    <code>./rvn offline-operation get-key &lt;path-to-database-dir&gt;</code>
                </div>
            </div>
            <div class="text-right margin-top-sm">
                <button type="button" class="btn btn-info" title="Navigate to Export Database View"
                        data-bind="visible: databasesToDelete.length === 1, click: exportDatabase">
                    <i class="icon-export-database"></i><span>Export Data</span>
                </button>
                <button type="button" class="btn btn-warning margin-left-xs" data-bind="click: keepFiles"
                        title="Delete & keep physical database files on disk">
                    <i class="icon-trash"></i><span>Delete & Keep Files</span>
                </button>
            </div>
        </div>
        <div class="padding margin margin-sm mb-0 border-radius-xs alert alert-danger">
            <h3>Delete all data</h3>
            <p class="small">
                Database will be deleted from all nodes in the cluster.<br/>
                All on-disk files will be deleted.
            </p>
            <div class="flex-horizontal margin-top-sm">
                <div class="flex-start text-danger">
                    <i class="icon-danger"></i>
                </div>
                <div>This action cannot be undone.</div>
            </div>
            <div class="text-right margin-top-sm">
                <button type="button" class="btn btn-danger margin-left-xs" data-bind="click: deleteEverything" title="Delete all the on-disk files">
                    <i class="icon-force"></i><span>Delete All Data</span>
                </button>
            </div>
        </div>
        <div class="padding">
            <span data-bind="visible: databasesToDelete.length === 1">
                In order to delete the database from only a single node (or multiple nodes) go to<br />
                <a href="#" data-bind="click: goToManageDbGroup" title="Navigate to Manage Database Group View">Manage Database Group</a>
            </span>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-bind="click: cancel" title="Cancel the delete operation">
                <i class="icon-cancel"></i><span>Cancel</span>
            </button>
        </div>
    </div>
</div>
